<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Select with feature layer</title>
    <link rel="stylesheet" href="/javascripts/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="/javascripts/arcgis_js_api/library/3.16/3.16/esri/css/esri.css">
    <style>
        html,body,#borderContainer {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #lead{
            width: 10%;
            float: left;
        }
    </style>
    <script src="/javascripts/arcgis_js_api/library/3.16/3.16/init.js"></script>
    <script>
        var map;
        var tb;
        var g;
        //按钮相应函数
        function onDrawRect(){
//            alert("点击了按钮");
//            map.disableMapNavigation();
//            tb = new Draw(map);
//            tb.on("draw-end", addGraphic);
            tb.activate(esri.toolbars.Draw.EXTENT);   //激活相应的图形
        }
        require([
            "esri/map", "esri/layers/FeatureLayer",
            "esri/tasks/query", "esri/geometry/Circle","esri/toolbars/draw",
            "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
            "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!","esri/symbols/PictureFillSymbol","dijit/layout/BorderContainer",
            "dijit/layout/ContentPane","dojo/on"
        ], function(
                Map, FeatureLayer,
                Query, Circle,Draw,
                Graphic, InfoTemplate, SimpleMarkerSymbol,
                SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
                esriConfig, Color, dom,PictureFillSymbol,on
        ) {
            // use a proxy page if a URL generated by this page is greater than 2000 characters
            //
            // this should not be needed as nearly all query & select functions are performed on the client
//            esriConfig.defaults.io.proxyUrl = "/proxy";//used when posting large payloads to an endpoint

            map = new Map("center", {
                basemap: "streets",
                center: [120.148,30.158],
                zoom: 15,
                slider: false
            });

            //add the census block points in on demand mode. Note that an info template has been defined so when
            //selected features are clicked a popup window will appear displaying the content defined in the info template.
            var featureLayer = new FeatureLayer("http://192.168.1.157:8399/arcgis/rest/services/zhxtd/ground_plan/MapServer/0",{
                infoTemplate: new InfoTemplate("FID: ${FID}", "${*}"),
                outFields: ["*"],
                showLables:true
            });

            // selection symbol used to draw the selected census block points within the buffer polygon
            var symbol = new SimpleMarkerSymbol(
                    SimpleMarkerSymbol.STYLE_CIRCLE,
                    12,
                    new SimpleLineSymbol(
                            SimpleLineSymbol.STYLE_SOLID,
                            new Color([0,255, 255]),
                            2
                    ),
                    new Color([207, 34, 171, 0.5])
            );
            featureLayer.setSelectionSymbol(symbol);

            //make unselected features invisible
            var defaultSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,
                    12,
                    new SimpleLineSymbol(
                            SimpleLineSymbol.STYLE_SOLID,
                            new Color([255, 255, 0, 0.9]),
                            1
                    ),
                    new Color([255, 0, 0, 0.5])).setSize(10);
            featureLayer.setRenderer(new SimpleRenderer(defaultSymbol));

            map.addLayer(featureLayer);

            //////////////////////////////////////////////////////////////////////////////////

            //绘制矩形
            map.on("load", drawRect);


            function drawRect() {
                tb = new Draw(map);
                tb.on("draw-end", addGraphic);
            }

            function addGraphic(evt) {
                //deactivate the toolbar and clear existing graphics
                // alert("addGraphic");
                tb.deactivate();
                map.enableMapNavigation();

                map.graphics.add(new Graphic(evt.geometry, symbol));

                //进行查询
                var query = new Query();
                query.geometry = evt.geometry;
                /*query.spatialRelationship = Query.SPATIAL_REL_CONTAINS;
                 query.where = "NAME = '" + stateName + "'"; */
                featureLayer.queryFeatures(query, selectFeature);
            }
            function selectFeature(response){
                var feature;
                var features = response.features;
                var inBuffer = [];

                for (var i = 0; i < features.length; i++) {
                    feature = features[i];
                    inBuffer.push(feature.attributes[featureLayer.objectIdField]);
                }

                var query = new Query();
                query.objectIds = inBuffer;
                //use a fast objectIds selection query (should not need to go to the server)
                featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
//                    var re="";
//                    for(var i=0;i<results.length;i++){
//                         g = results[i];
////                        console.log(g);
////                        console.log(feature);
//                        re += g.attributes["FID"]+g.attributes["STNM"]+"<br/>";
//                    }
//                    alert("查询结果 TRACT: "+re);
//                    var content = document.getElementById("content");
//                    content.innerHTML=re
                    var getTable = function(arrTh,arrTr){
                        var s = '<table class="tbData" border="1" cellpadding="10" align="center">';
                        s += '<tr>';
                        for(var i=0; i<arrTh.length; i++) {
                            s += '<th>' + arrTh[i] + '</th>';
                        }
                        s += '</tr>';
                        for(var i=0; i<arrTr.length; i++) {
                            s += '<tr>';
                            for(var j=0; j<arrTr[i].length; j++) {
                                s += '<td>' + arrTr[i][j] + '</td>';
                            }
                            s += '</tr>';
                        }
                        s += '</table>';
                        return s;
                    };

                    var arrTh = ['FID','所在街道'];
                    var arrTr = [];
                    for(var j = 0;j <results.length;j++){
                       var v =results[j];
//                        console.log(v.attributes);
                        arrTr.push([
                            v.attributes["FID"],
                            v.attributes["STNM"]
                        ]);
//                        console.log(arrTr);
                    }
                    document.getElementById('content').innerHTML = getTable(arrTh, arrTr);

                });
            }
        });
    </script>
</head>


<body  class="soria">
<div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar'" style="height: 100%">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props=" region:'leading'" id="lead" style="width: 10%;height: 100%">
        <div id="btn">
            <button id="Extent" onclick="onDrawRect()">拉框查询</button>
        </div>
        <div id="content" style="height: 100%">

        </div>
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props= " region:'center'" id="center" style="height: 100%"></div>
</div>
<script>

</script>

</body>
</html>